<md-card class="demo-card demo-basic">
  <md-toolbar color="primary">Basic</md-toolbar>
  <md-card-content>
    <form>
      <md-input class="demo-full-width" placeholder="Company (disabled)" disabled value="Google">
      </md-input>

      <table style="width: 100%" cellspacing="0"><tr>
        <td><md-input placeholder="First name" style="width: 100%"></md-input></td>
        <td><md-input placeholder="Long Last Name That Will Be Truncated" style="width: 100%"></md-input></td>
      </tr></table>
      <p>
        <md-textarea class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></md-textarea>
        <md-textarea class="demo-full-width" placeholder="Address 2"></md-textarea>
      </p>
      <table style="width: 100%" cellspacing="0"><tr>
        <td><md-input class="demo-full-width" placeholder="City" value="Mountain View"></md-input></td>
        <td><md-input class="demo-full-width" placeholder="State" maxLength="2" value="CA"></md-input></td>
        <td><md-input #postalCode class="demo-full-width" maxLength="5"
                      placeholder="Postal Code"
                      value="94043">
          <md-hint align="end">{{postalCode.characterCount}} / 5</md-hint>
        </md-input></td>
      </tr></table>
    </form>
  </md-card-content>
</md-card>

<md-card class="demo-card demo-basic">
  <md-toolbar color="primary">Prefix + Suffix</md-toolbar>
  <md-card-content>
    <md-input placeholder="amount" align="end">
      <span md-prefix>$&nbsp;</span>
      <span md-suffix>.00</span>
    </md-input>
  </md-card-content>
</md-card>

<md-card class="demo-card demo-basic">
  <md-toolbar color="primary">Divider Colors</md-toolbar>
  <md-card-content>
    <h4>Input</h4>
    <md-input dividerColor="primary" placeholder="Default Color" value="example"></md-input>
    <md-input dividerColor="accent" placeholder="Accent Color" value="example"></md-input>
    <md-input dividerColor="warn" placeholder="Warn Color" value="example"></md-input>

    <h4>Textarea</h4>
    <md-textarea dividerColor="primary" placeholder="Default Color" value="example"></md-textarea>
    <md-textarea dividerColor="accent" placeholder="Accent Color" value="example"></md-textarea>
    <md-textarea dividerColor="warn" placeholder="Warn Color" value="example"></md-textarea>

  </md-card-content>
</md-card>

<md-card class="demo-card demo-basic">
  <md-toolbar color="primary">Hints</md-toolbar>
  <md-card-content>
    <h4>Input</h4>
    <p>
      <md-input placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
                value="Hello world. How are you?"
                #characterCountHintExample>
        <md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>
      </md-input>
    </p>

    <h4>Textarea</h4>
    <p>
      <md-textarea placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
                value="Hello world. How are you?"
                #characterCountHintExample>
        <md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>
      </md-textarea>
    </p>
  </md-card-content>
</md-card>

<md-card class="demo-card">
  <md-card-title>
    Hello <md-input [(ngModel)]="name" type="text" placeholder="First name"></md-input>,
    how are you?
  </md-card-title>
  <md-card-content>
    <p>
      <md-input disabled placeholder="Disabled field" value="Value"></md-input>
      <md-input required placeholder="Required field"></md-input>
    </p>
    <p>
      <md-input placeholder="100% width placeholder" style="width: 100%"></md-input>
    </p>
    <p>
      <md-input placeholder="Character count (100 max)" maxLength="100" style="width: 100%"
                #input>
        <md-hint align="end">{{input.characterCount}} / 100</md-hint>
      </md-input>
    </p>
    <p>
      <md-input placeholder="Show Hint Label" style="width: 100%"
                hintLabel="Hint label"></md-input>
    </p>

    <p>
      <md-input>
        <md-placeholder>
          I <md-icon class="demo-icons">favorite</md-icon> <b>bold</b> placeholder
        </md-placeholder>
        <md-hint>
          I also <md-icon class="demo-icons">home</md-icon> <i>italic</i> hint labels
        </md-hint>
      </md-input>
    </p>
    <p>
      <md-input placeholder="Show Hint Label With Character Count" style="width: 100%"
                hintLabel="Hint label" characterCounter></md-input>
    </p>
    <p>
      <md-checkbox [(ngModel)]="dividerColor">Check to change the divider color:</md-checkbox>
      <md-input [dividerColor]="dividerColor ? 'primary' : 'accent'"
                [placeholder]="dividerColor ? 'Primary color' : 'Accent color'"></md-input>
    </p>
    <p>
      <md-checkbox [(ngModel)]="requiredField"> Check to make required:</md-checkbox>
      <md-input [required]="requiredField"
                [placeholder]="requiredField ? 'Required field' : 'Not required field'"></md-input>
    </p>
    <p>
      <md-checkbox [(ngModel)]="floatingLabel"> Check to make floating label:</md-checkbox>
      <md-input [floatingPlaceholder]="floatingLabel"
                [placeholder]="floatingLabel ? 'Floating label' : 'Not floating label'"></md-input>
    </p>

    <p>
      <md-input placeholder="Prefixed" value="example">
        <div md-prefix>Example:&nbsp;</div>
      </md-input>
      <md-input placeholder="Suffixed" value="123" align="end">
        <span md-suffix>.00 €</span>
      </md-input>
      <br/>
      Both:
      <md-input #email placeholder="Email Address" value="angular-core" align="end">
        <span md-prefix><md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>&nbsp;</span>
        <span md-suffix class="demo-transform" [class.primary]="email.focused">&nbsp;@gmail.com</span>
      </md-input>
    </p>

    <p>
      Empty: <md-input></md-input>
      <label>Label: <md-input></md-input></label>
    </p>
  </md-card-content>
</md-card>

<md-card class="demo-card">
  <table width="100%">
    <thead>
      <td>Table</td>
      <td colspan="3">
        <button (click)="addABunch(5)">Add 5</button>
        <button (click)="addABunch(10)">Add 10</button>
        <button (click)="addABunch(100)">Add 100</button>
        <button (click)="addABunch(1000)">Add 1000</button>
      </td>
    </thead>
    <tr *ngFor="let item of items; let i = index">
      <td>{{i+1}}</td>
      <td>
        <md-input type="number" placeholder="value" aria-label="hello" [(ngModel)]="items[i].value"></md-input>
      </td>
      <td>
        <input type="number" [(ngModel)]="items[i].value">
      </td>
      <td>{{item.value}}</td>
    </tr>
  </table>
</md-card>


<md-card>
  <h2>textarea autosize</h2>
  <textarea md-autosize class="demo-textarea"></textarea>
</md-card>
